<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="shortcut icon" href="../../share/img/logo.png">
		<link rel="stylesheet" href="../../share/css/main.css">
		<script src="../../share/js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../share/js/vue/vue.2.6.14.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../share/js/util.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.tip {
				padding: 0.5rem;
				background: aliceblue;
				border-radius: 0.25rem;
				border: solid 1px #ddd;
				margin: 0.5rem 0;
			}
		</style>
	</head>
	<body>
		<div class="row">
			<div class="col-1">
				<section>
					<h3>组件开发</h3>
					<ul class="d-list">
						<li>父组件可通过子组件定义的属性，向子组件传递数据</li>
						<li>子组件可通过触发自定义事件，向父组件传递信息</li>
						<li>非父子组件之间可通过事件中心相互通知传递数据</li>
					</ul>
				</section>
			</div>
			<div class="col-1">
				<div id="app">
					<section>
						<h3>简单组件</h3>
						<c1></c1>
					</section>
					<section :style="{color: color}">
						<h3>父子组件交互</h3>
						<p><i>父组件传数据给子组件</i></p>
						<c2 name="Tom" age="20"></c2>
						<c2 name="Jack" age="25"></c2>
						<hr />
						<p><i>子组件事件通知父组件</i></p>
						<c3 @colorchange="onColorChange"></c3>
					</section>
					<section>
						<h3>各级组件交互</h3>
						<c4></c4>
						<c5></c5>
					</section>
					<section>
						<h3>匿名插槽</h3>
						<c6>快递到了</c6>
						<c6>下雨啦</c6>
					</section>
					<section>
						<h3>具名插槽</h3>
						<c7>
							<template v-slot:head>
								<h4>商品列表</h4>
							</template>
							<template v-slot:default>
								<ul class="d-list">
									<li>Apple</li>
									<li>Pear</li>
									<li>Orange</li>
								</ul>
							</template>
							<template v-slot:foot>
								<span>总计：5件商品</span>
							</template>
						</c7>
					</section>
					<section>
						<h3>作用域插槽</h3>
						<p>默认内容</p>
						<c8 name="Tom" :goods="goods"></c8>
						<p>自定义插槽内容</p>
						<c8 name="Tom" :goods="goods">
							<template v-slot:default="props">
								<ul class="d-list">
									<li v-for="item in props.goods">
										<span>{{item.name}}</span><button>-</button><span>{{item.count}}</span><button>+</button>
									</li>
								</ul>
							</template>
						</c8>
					</section>
				</div>
			</div>
			<div class="col-1">
				<ul id="log" class="d-list mt-10"></ul>
			</div>
		</div>
		<script>
			var c1 = {
				template: `<div>一个简单的组件</div>`,
			};
			var c2 = {
				props: ["name", "age"],
				template: `<div>I'm {{name}}, {{age}} year's old.</div>`
			};
			var c3 = {
				template: `<div>
				<button @click="changeColor('red')">红</button>
				<button @click="changeColor('green')">绿</button>
				<button @click="changeColor('blue')">蓝</button></div>`,
				methods: {
					changeColor(val) {
						this.$emit("colorchange", val);
					}
				}
			};

			// 定义事件中心对象
			var em = new Vue();

			var c4 = {
				data: function() {
					return {
						count: 10
					};
				},
				template: `<div>商品数量: {{count}} <button @click="addCart">加入购物车</button></div>`,
				methods: {
					addCart() {
						this.count--;
						em.$emit("cartChanged", 1);
					}
				},
				mounted() {
					em.$on("stockChanged", delta => this.count += delta);
				}
			};
			var c5 = {
				data: function() {
					return {
						count: 0
					};
				},
				template: `<div><button @click="less">-</button> {{count}} <button @click="more">+</button></div>`,
				methods: {
					less() {
						this.count--;
						em.$emit("stockChanged", 1);
					},
					more() {
						this.count++;
						em.$emit("stockChanged", -1);
					}
				},
				mounted() {
					em.$on("cartChanged", delta => this.count += delta);
				}
			};
			var c6 = {
				template: `<div class='tip'><b class="mr-5">消息</b><slot></slot></div>`,
			};
			var c7 = {
				template: `<div class="card"><header><slot name="head" /></header><main><slot /></main><footer><slot name="foot" /></footer></div>`,
			};
			var c8 = {
				props: ["goods", "name"],
				template: `<div class="card"><header><slot name="head">{{name}} 的购物车</slot></header><main><slot :goods="goods">
				<ul>
				<li v-for="item in goods">{{item.name}}</li>
				</ul>
				</slot></main></div>`,
			};
			var vm = new Vue({
				el: "#app",
				data: {
					color: "black",
					goods: [{
						"name": "苹果",
						"count": 2
					}, {
						"name": "香蕉",
						"count": 1
					}, {
						"name": "桔子",
						"count": 3
					}]
				},
				methods: {
					onColorChange(val) {
						this.color = val;
					}
				},
				components: {
					c1,
					c2,
					c3,
					c4,
					c5,
					c6,
					c7,
					c8
				}
			});
		</script>
	</body>
</html>
